<template>
	<view class="index-goods">
		<!-- 列表平铺两列三列 -->
		<view class='img-grids bottom-cell-group'
			v-if="jdata.params.column == '2' && jdata.params.display == 'list' || jdata.params.column == '3' && jdata.params.display == 'list'"
			v-bind:class="'column'+jdata.params.column">
			<view class="" v-if="count">
				<view class="img-grids-item" v-for="item in jdata.params.list" :key="item.id"
					@click="goodsDetail(item.id)">
					<image class="img-grids-item-t have-none" style="border-radius: 20rpx;" :src="item.image_url"
						mode='aspectFill'></image>
					<view class="img-grids-item-b">
						<view class="goods-name grids-goods-name">
							{{item.name}}
						</view>
						<view
							style="display: flex;justify-content: space-between;align-items: center;color: #999999;font-size: 18rpx;margin: 10upx 0 10upx 0;">
							<view style="text-decoration: line-through;">
								￥{{item.mktprice}}
							</view>
							<view>
								已售{{item.buy_count}}件
							</view>
						</view>
						<view class="goods-item-c">
							<view class="goods-price red-price">￥<text style="font-size: 36upx;">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else-if="!count && !jdata.params.listAjax">
				<view class='img-grids-item'>
					<image class='img-grids-item-t have-none' src='' mode=''></image>
					<view class='img-grids-item-b'>
						<view class='goods-name grids-goods-name have-none'></view>
						<view class='goods-item-c'>
							<view class='goods-price red-price have-none'></view>
						</view>
					</view>
				</view>
				<view class='img-grids-item'>
					<image class='img-grids-item-t have-none' src='' mode=''></image>
					<view class='img-grids-item-b'>
						<view class='goods-name grids-goods-name have-none'></view>
						<view class='goods-item-c'>
							<view class='goods-price red-price have-none'></view>
						</view>
					</view>
				</view>
				<view class='img-grids-item'>
					<image class='img-grids-item-t have-none' src='' mode=''></image>
					<view class='img-grids-item-b'>
						<view class='goods-name grids-goods-name have-none'></view>
						<view class='goods-item-c'>
							<view class='goods-price red-price have-none'></view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-else="">
					<scroll-view class='swiper-list' scroll-x="true"></scroll-view>
				</view> -->
			<!-- </view> -->
		</view>

		<!-- 列表平铺单列 -->
		<view class="img-list bottom-cell-group" v-if="jdata.params.column == '1' && jdata.params.display == 'list'">
			
			<!-- 	<view class="XieBox" style="background-color: #202126;margin-bottom: 113rpx;width: 513rpx;padding: 20rpx;">
				<image src="../../static/images/default.png" style="width: 513rpx;height: 593rpx;" mode=""></image>
				<view class="XieName">
					韩版立体圆表盘石英初高中学生女表手表
				</view>
				<view
					style="display: flex;color: #B9B9B9;font-size: 24rpx;justify-content: space-between;margin: 25rpx 0 20rpx 0 ;">
					<view style="text-decoration: line-through;">
						￥289.00
					</view>
					<view>
						已售200件
					</view>
				</view>
				<view class="goods-item-c">
					<view class="goods-price" style="color:#F2D7AAFF;font-weight: bold;font-size: 28rpx;">￥<text
							style="font-size:36rpx">1168.00</text></view>
				</view>
			</view> -->
			<view class='cell-item2 right-img' v-if="jdata.params.title != ''">
				<view class='cell-item-hd'>
					<view class='cell-hd-title2'>{{jdata.params.title}}</view>
				</view>
				<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'">

					<text class='cell-ft-text'
						@click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
			</view>
			<view v-if="count" style="margin: 0 30rpx;">
				<view class="img-list-item" v-for="(item, index) in jdata.params.list" :key="index"
					@click="goodsDetail(item.id)" style="padding: 15rpx;">
					<image class="img-list-item-l have-none" style="border-radius: 20rpx;width: 252rpx;height: 252rpx;"
						:src="item.image_url" mode='aspectFill'></image>
					<view class="img-list-item-r">
						<view
							style="font-weight: 800;font-size: 32rpx;color: #FFFFFF;margin-top: 28rpx;display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 2;">
							{{item.name}}
						</view>
						<view
							style="display: flex;color: #B9B9B9;font-size: 24rpx;justify-content: space-between;margin: 25rpx 0 20rpx 0 ;">
							<view style="text-decoration: line-through;">
								￥{{item.mktprice}}
							</view>
							<view>
								已售{{item.buy_count}}件
							</view>
						</view>
						<view class="goods-item-c">
							<view class="goods-price" style="color:#F2D7AAFF;font-weight: bold;font-size: 28rpx;">￥<text
									style="font-size:36rpx">{{item.price}}</text><text v-show="item.buypoint > 0">+{{item.buypoint}}购物积分</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-none" v-else>
				<image class="order-none-img" src="/static/image/order.png" mode=""></image>
			</view>
		</view>

		<!-- 横向滚动 -->
		<view class='img-grids bottom-cell-group'
			v-if="jdata.params.column == '2' && jdata.params.display == 'slide' || jdata.params.column == '3' && jdata.params.display == 'slide'"
			v-bind:class="'slide'+jdata.params.column">
			<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000" class="swiperbb" circular
				:previous-margin="'300rpx'" @transition="transition_hanlde" @change="change">
				<swiper-item class="swiper_box2" v-for="item,id in jdata.params.list" :key="id"
					:style="{zIndex:id == current_id?1000:999}" :class="{on_choose:current_id == id}">
					<view class="swiper_box3" :class="{current_swiper:id == current_id}" @tap="goodsDetail(item.id)">
						<view class="swiper_goods_img">
							<image :src="item.image_url" style="width: 513rpx;height: 593rpx;" mode="aspectFill">
							</image>
						</view>
						<view class="swiper_info">
							<view class="swiper_name">
								{{item.name}}
							</view>
							<view
								style="display: flex;color: #B9B9B9;font-size: 24rpx;justify-content: space-between;margin: 25rpx 0 20rpx 0 ;">
								<view style="text-decoration: line-through;">
									￥{{item.mktprice}}
								</view>
								<view>
									已售{{item.buy_count}}件
								</view>
							</view>
							<view class="goods-item-c">
								<view class="goods-price" style="color:#F2D7AAFF;font-weight: bold;font-size: 28rpx;">
									￥<text style="font-size:36rpx">{{item.price}}</text><text v-show="item.buypoint > 0">+{{item.buypoint}}购物积分</text></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		goods
	} from '@/config/mixins.js'
	export default {
		filters: {
			substr(val) {
				if (val.length == 0 || val == undefined) {
					return false;
				} else if (val.length > 13) {
					return val.substring(0, 13) + "...";
				} else {
					return val;
				}
			}
		},
		mixins: [goods],
		name: "jshopgoods",
		props: {
			jdata: {
				// type: Array,
				required: true,
			}
		},
		data() {
			return {
				current_id: 0,
			}
		},
		computed: {
			count() {
				return (this.jdata.params.list.length > 0)
			}
		},
		methods: {
			transition_hanlde: function(e) {

			},
			change: function(e) {
				this.current_id = e.detail.current
				//如果是用户touch  则暂停自动轮播 20s后恢复
				if (this.is_auto) {
					this.is_auto = e.detail.source != 'touch'
					if (!this.is_auto) {
						setTimeout(() => {
							this.is_auto = true;
						}, 20000)
					}
				}
			},
			//跳转到商品详情页面
			goodsDetail: function(id) {
				let url = '/pages/goods/index/index?id=' + id;
				this.$common.navigateTo(url);
			},

		},
	}
</script>

<style>
	::v-deep .swiperbb>.uni-swiper-wrapper {
		overflow: visible !important;
	}

	.cell-item {
		border: none;
		/* padding-bottom: 0; */
	}

	.cell-ft-text {
		font-size: 22upx;
		color: #999;
	}



	.img-grids,
	.img-list {
		/* margin-top: 20upx; */
	}

	.img-grids-item {
		display: inline-table;
		margin-top: 0;
		margin-bottom: 14upx;
		background: #202126;
		border-radius: 10px;
	}

	.column3 .img-grids-item {
		width: 230upx;
		height: 364rpx !important;
		margin: 15upx;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 6upx;
	}

	.column3 .img-grids-item:nth-child(3n) {
		margin-right: 15upx;
	}

	.column3 .img-grids-item-t {
		width: 230upx;
		height: 230upx;
	}

	.column3 .grids-goods-name {
		font-size: 24upx;
		color: #202126;
		margin: 10upx 0 10upx 0;
		/* height: 68upx; */
		/* min-height: 54rpx; */
	}

	.column3 .img-grids-item-b {
		padding: 0 8upx 8upx;
	}

	.column3 .goods-price {
		font-size: 26upx;
	}

	.slide3 .img-grids-item {
		width: 200upx;
	}

	.slide3 .img-grids-item-t {
		width: 200upx;
		height: 200upx;
	}

	.slide3 .grids-goods-name {
		font-size: 24rpx;
		/* height: 66rpx; */
		height: 50rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.index-goods .img-grids-item {

		display: inline-block;
		margin-top: 20upx;
	}

	.index-goods .img-list-item {
		padding: 0upx 26upx;
		margin-bottom: 14upx;
		background: #202126;
		display: flex;
		border-radius: 10px;
	}

	.index-goods .img-list {
		padding-bottom: 10upx;
	}

	.swiperbb {
		margin: 75rpx 0 115rpx 20rpx;
		position: relative;
		width: 100%;
		height: 900rpx;
		display: flex;
		align-items: center;
	}

	.current_swiper {
		transform: scale(1.0) rotate(15deg);
		z-index: 1000;
	}

	.swiper_box2 {
		width: 546rpx;
		height: 796rpx;
		overflow: visible !important;
		opacity: .4;
		transition: opacity .3s;
	}

	.swiper_box3 {
		width: 546rpx;
		height: 836rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		top: 30rpx;
		padding: 15rpx;
		bottom: 20rpx;
		left: -220rpx;
		right: 100rpx;
		transition: all 0.5s ease;
		background: #232429;
		box-shadow: 0px 10rpx 40rpx 1rpx rgba(0, 0, 0, 0.53);
		border-radius: 40rpx;
		padding-bottom: 20rpx;
	}

	.sale_time_left {
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(28, 29, 30, 0.63);
		border-radius: 50rpx;
		width: auto;
		padding: 12rpx 22rpx;
		font-size: 24rpx;
		color: #fff;
		position: absolute;
		top: 25rpx;
		left: 30rpx;
		z-index: 12
	}

	.swiper_goods_img image {
		width: 100%;
		height: 580rpx;
		border-radius: 40rpx;
		position: relative;
		box-sizing: border-box;
	}

	.swiper_goods_img {
		width: 100%;
		position: relative;
		text-align: center;
	}

	.swiper_name {
		width: 100%;
		display: flex;
		align-items: center;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		padding-bottom: 20rpx
	}

	.swiper_info {
		padding: 15rpx 30rpx
	}

	.on_choose {
		opacity: 1;
	}
</style>